<template>
    <div class="loginBody">
        <div class="loginBox">
            <div class="loginlogo"><div class="logoimg"></div></div>
            <div class="loginTitle">后台管理</div>
            <div class="loginForm">
                <el-form ref="loginform">
                    <el-form-item prop="email">
                        <span class="mb mb-yonghu"></span>
                        <el-input placeholder="账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <span class="mb mb-mima"></span>
                        <el-input type="password" auto-complete="off"  placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="loginBtnbox"><el-button type="danger" @click="loginFn" size="large">登录</el-button></div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="copyright">Copyright© Taozi 版权所有</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg:""
            }
        },
        methods: {
            loginFn() {
                this.$router.replace("/dashboard")
            }
        },
        mounted(){
            
        }
    }
</script>
<style lang="scss">
    .loginTitle{ padding:90px 10px 0; color:#fff;  border-radius: 10px 10px 0px 0px; font-size:24px; text-align: center;color:#333; text-align: center;}
    .loginTitle i{ font-size:10px; display: inline-block; margin-left: 10px; font-style: normal; background: #fff; color:#20a0ff; border-radius: 4px; padding:3px 5px;}
    .loginBody{ width:100%; height:100vh; background-size: cover; background-image: -webkit-linear-gradient( 135deg, #008bfe 0%, #02c6ff 100%);
  background-image: linear-gradient( 135deg, #008bfe 0%, #02c6ff 100%); background-position: center center; overflow: hidden; box-sizing: border-box; padding-bottom:30px;}
    .loginlogo{ width: 150px; height: 150px; position: absolute; left:50%; margin-left: -75px; background-size:cover; top:-75px;}
    .logoimg{  background-size:cover; width:100%; height: 100%;-webkit-animation:circle 10s infinite linear; -moz-animation:circle 10s infinite linear;  animation:circle 10s infinite linear; }
    .loginBox{width: 700px; height:450px; top:45%; margin:-200px auto 10px;  box-sizing: border-box; border-radius:4px;  background:rgba(255,255,255,0.9); border-radius: 10px; box-shadow: 0 20px 30px rgba(0,0,0,0.3); }
    .loginForm{
        padding:30px 50px 20px;
    }
    .loginMan{ position: absolute; right:-50px; bottom:-50px;}
    .loginBtnbox{ text-align: center; padding-top:30px;}
    .loginBtnbox .el-button{ min-width: 50%; padding: 14px 20px;}
    .loginBox{
        position: relative;
        input{
            padding: 12px 5px 12px 15px;
            height: 50px;
            padding-left: 40px;
            color:#333;
        }
        .el-form-item{ position: relative;}
        .iconfont{ position: absolute; left:10px; top:6px; z-index: 2; color:#999; font-size:20px;}
    }
    .copyright{ position: absolute; bottom:15px; left:0; width:100%; text-align: center; color:#fff; opacity: 0.4; font-size:12px; padding:10px; box-sizing: border-box;}
    .el-form-item__content{ position: relative;}
    .el-form-item__content .mb{ position: absolute; left:14px; top:5px; z-index: 222; font-size:20px; color:#666}
    @media screen and (max-width:764px){
        .loginMan{ display: none;}
        .loginTitle{ background:none; color:#fff; }
        .loginBox{ background: none;box-shadow: none; width:100%;}
        .el-checkbox{ color:#fff}
        .loginBtnbox .el-button{ min-width: 100%;}
        .loginlogo{ transform: scale(0.6); top:-40px;}
    }
    @-webkit-keyframes circle {
        0%	 { -webkit-transform: rotate(0deg); }
        100% {-webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes circle {
        0%	 { -moz-transform: rotate(0deg); }
        100% {-moz-transform: rotate(360deg);}
    }
    @keyframes circle {
        0%	 { transform: rotate(0deg); }
        100% {transform: rotate(360deg); }
    }
</style>